<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>天气案例</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div class="app">
  <h2>今天天气很 {{info}}</h2>
  <button @click="changeWeather">切换</button>
  <br>
  <br>
  <br>
  <!--深度监视-->
  <button @click="number.a.b.c.value++">{{number.a.b.c.value}}</button>
</div>
</body>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '.app',
    data: {
      isHot: false,
      info: '炎热',  // 存在才能监视
      number: {
        a: {
          b: {
            c: {
              value: 100
            }
          }
        }
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot
      }
    },

    // watch: {
    //   // 监视isHot的变化, 变化后执行回调函数
    //   isHot: {
    //     immediate: true, // 立即执行
    //     handler(newValue, oldValue) {
    //       console.log(newValue, oldValue)
    //       this.info = this.isHot ? '炎热' : '凉爽'
    //     }
    //   }
    // }
  })
  vm.$watch('isHot', {
    immediate: true,
    handler(newValue, oldValue) {
      this.info = this.isHot ? '炎热' : '凉爽'
    }
  })

  // 多层结构 - 深度监视
  vm.$watch('number', {
    immediate: true,
    deep: true,
    handler(newValue, oldValue) {
      console.log('@', newValue, oldValue)
    }
  })
</script>
</html>